<!--
 * @Description: 自定义 悬浮异形 tabbar 
-->
<template>
	<view class="tqb-tabbar">



		<view class="tqb-tabbar-body">
			<view class="tqb-tabbar-item" v-for="(item, index) in tabBarList" :key="index"
				@click="switchClick(item, index)">
				<view v-if="index !== 2" class="tabbar-item-body">
					<view class="tabbar-item-icon">
						<image :src="activeIndex == index ? item.selectedIconPath : item.iconPath"
							style="width: 56rpx; height: 56rpx;"></image>
					</view>
					<view :class="[activeIndex == index ? 'active' : '', 'tab-bar-text']">{{ item.text }}</view>
				</view>
				<view v-else class="add-icon">
					<image :src="item.iconPath" style="width: 88rpx; height: 88rpx;"></image>
				</view>
			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>
				<view>

					<view style="text-align: center; margin-bottom: 20rpx;">
						发布类型
					</view>

					<view class="flex-around" style="text-align: center;">
						<view v-for="(item, index) in handleList" :key="index" @click="gopagesFn(item.url)">
							<view>
								<image :src="item.imageUrl" style="width: 80rpx; height: 80rpx;"></image>
							</view>
							<view>
								{{ item.text }}
							</view>
						</view>
					</view>

				</view>


			</template>
		</sunui-popup>
	</view>

</template>

<script>
	export default {
		props: ['activeIndex'],
		data() {
			return {
				close: this.$img.close,
				tabBarList: [{
					text: '首页',
					iconPath: this.$img.home_off,
					selectedIconPath: this.$img.home_on,
					pagePath: '/pages/home/home',
				}, {
					text: '我喜欢的',
					iconPath: this.$img.customer_off,
					selectedIconPath: this.$img.customer_on,
					pagePath: '/pages/index/listfollowMe',
				}, {
					text: '创建发布',
					iconPath: this.$img.add,
				}, {
					text: '消息',
					iconPath: this.$img.find_off,
					selectedIconPath: this.$img.find_on,
					pagePath: '/pagesB/index/listMessages',
				}, {
					text: '我的',
					iconPath: this.$img.work_off,
					selectedIconPath: this.$img.work_on,
					pagePath: '/pagesA/personalCenter/personalCenter',
				}],
				handleList: [{
					imageUrl: this.$img.dazi,
					text: '搭子',
					url: `/pagesA/personalCenter/PublishTag`
				}, {
					imageUrl: this.$img.geme,
					text: '服务',
					url: `/pagesA/personalCenter/publishTasks`
				}, {
					imageUrl: this.$img.makeFriends,
					text: '圈子',
					url: `/pagesB/index/publishCircle`
				}],
				visible: false,
			}
		},
		watch: {
			visible: function(d) {
				// todo anything
			}
		},
		methods: {
			switchClick(data, index) {
				if (index == this.activeIndex) {
					return
				}
				if (index === 2) {
					if (uni.getStorageSync('userInfo').token) {
					
						// this.visible = !this.visible;
						this.$refs.myPackagePopup.show({
							anim: 'bottom',
							position: 'bottom',
							style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:20rpx;position: fixed;bottom:200rpx;margin-left:75rpx ',
							// bottomClose: false,
							// shadeClose: true,
							// topclose: true,
							clostPx:true
						});
						
						if (this.activeIndex == 1) {
							uni.$emit('hideCanvas', this.visible)
						}
						return
					
					} else {
						this.$sun.navRe('/pages/Login/setUpChildLogin')
					}
				
				}

				this.handleClose()

				if (uni.getStorageSync('userInfo').token) {

					uni.redirectTo({
						url: data.pagePath
					})

				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}

				// uni.switchTab({
				// 	url: data.pagePath
				// });
			},
			handleClose() {
				this.visible = false;
				if (this.activeIndex == 1) {
					uni.$emit('hideCanvas', false)
				}
			},
			handleOpenPage(item) {
				let that = this
				setTimeout(function() {
					that.handleClose()
				}, 500)
				uni.navigateTo({
					url: item.url
				})
			},
			handleClick(item) {
				let that = this
				that.handleOpenPage(item)
				// that.$u.throttle(that.handleOpenPage(item), 500)
			},
			gopagesFn(url) {
				this.$refs.myPackagePopup.close()
				
				if (uni.getStorageSync("userInfo").real_name||(!Number(uni.getStorageSync("system").isOpen_idCard_authentication)) ) {
					this.$sun.navGo(url)
				} else {
					this.$sun.toast('请实名以后在发布', 'none')
				
					setTimeout(() => {
						this.$sun.navGo('/pagesA/personalCenter/informationIdCard')
				
					}, 500)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tqb-tabbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 500;
	}

	.tqb-tabbar-body {
		border-radius: 80rpx;
		height: 120rpx;
		display: flex;
		background: linear-gradient(to right, #ffffff, #F1EDFF);
		position: fixed;
		bottom: 68rpx;
		width: 704rpx;
		left: 24rpx;
		z-index: 1001;
		padding-top: 20rpx;
		box-shadow: 0px 0px 22rpx 9rpx rgba(0, 0, 0, 0.1);
		// box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(20px);

		.tqb-tabbar-item {
			flex: 1;
			display: flex;
			justify-content: center;
			text-align: center;

			.tabbar-item-body {}

			.tabbar-item-icon {
				display: flex;
				justify-content: center;
			}

			.tab-bar-text {
				color: #999999;
				font-size: 22rpx;
				margin-top: 9rpx;
			}

			.active {
				color: #645AEE;
			}

			.add-icon {
				width: 88rpx;
				height: 88rpx;
				position: relative;
				top: -8rpx;
			}
		}
	}

	.tqb-tabbar-popup {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// width: 100%;
		// // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.49) 32%, rgba(0, 0, 0, 0.66) 100%);
		// height: 660rpx;

		width: 100%;
		height: 36vh;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 5px;
		box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(20px);
		transition: 0.5s ease;


		.mask-close {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.popup-body {
			display: flex;

			position: absolute;
			top: 142rpx;
			width: 100%;

			.popup-item {
				width: 20%;
				margin-bottom: 20rpx;
				text-align: center;

				.popup-item-icon {
					display: flex;
					justify-content: center;
				}

				.popup-item-text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
</style>